<template>
  <div class="page-content">
    <div class="comm-content" ref="main"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myEcharts: null,
    };
  },
  methods: {
    // 适配屏幕
    screen() {
      this.myEcharts.resize();
      // 计算一个文字大小的比例
      let width = this.$refs.main.offsetWidth;
      let num = (width / 100) * 5;
      let options = {
        title: {
          textStyle: {
            // 设置主题样式
            fontSize: num,
          },
        },
      };
      // 修改图标样式后重新绘制
      this.myEcharts.setOption(options);
    },
    // 初始化图标
    initEcharts() {
      let main = this.$refs.main;
      // 初始化echarts
      this.myEcharts = this.$echarts.init(main,this.themeStatus);
      /** @type EChartsOption */
      let options = {
        title: {
          text: "全国种植每月收入情况",
        },
        xAxis: {
          show: true,
          type: "category",
          //   type: "category",
          //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          // show:true,
          left: '15%'
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            type: "bar",
            itemStyle: {
              //设置图标颜色
              borderRadius: [100, 100, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x1: 0,
                y1: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0F3357",
                  },
                  {
                    offset: 1,
                    color: "#36BFE5",
                  },
                ],
              },
            },
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
    // 获取数据
    async getData() {
      let dataList = await this.$http("/api/plantingHarvest");
      let dataMonth = dataList.data.map((item) => {
        return item.month;
      });
      let dataHarvest = dataList.data.map((item) => {
        return item.harvest;
      });
      //   console.log(dataMonth, dataHarvest);
      this.setEcharts(dataMonth, dataHarvest);
    },
    // 绘制图标
    setEcharts(dataMonth, dataHarvest) {
      let options = {
        xAxis: {
          show:true,
          type: "category",
          data: dataMonth,
        },
        tooltip:{
          show:true
        },
        series: [
          {
            data: dataHarvest,
            type: "bar",
            label:{
              show:true, // 顶部显示数值
              position:'top'
            },
            itemStyle: {
              // 圆角
              borderRadius: [100, 100, 0, 0],
            },
            barWidth: 20,
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener("resize", this.screen);
    this.screen();
    // let box = this.$refs.box;
    // let myEcharts = this.$echarts.init(box);
    // /** @type EChartsOption */
    // let options = {
    //   title: {
    //     text: "全国种植每月收入情况",
    //   },
    //   xAxis: {
    //     type: "category",
    //     data: dataMonth,
    //   },
    //   yAxis: {
    //     type: "value",
    //   },
    //   series: [
    //     {
    //       data: dataHarvest,
    //       type: "bar",
    //       itemStyle: {
    //         // 圆角
    //         borderRadius: [100, 100, 0, 0],
    //       },
    //       barWidth: 30,
    //     },
    //   ],
    // };
    // myEcharts.setOption(options);
  },
  destroyed() {
    window.removeEventListener("reset", this.screen);
  },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
